Add `react-native-svg` interface #3242

latekvo · 2024-11-27T14:37:58Z

Description

This PR adds integration with the react-native-svg (RNSVG) to improve hitbox detection of the SVG elements they provide.

~~blocked~~ by software-mansion/react-native-svg#2583
~~blocked~~ by nested SvgViews with viewBox prop have invalid hit detection - No issue opened yet

Test plan

use the newly added SVG integration example for testing this feature

…ler bounds checker

latekvo · 2024-11-28T14:43:45Z

Integration works as of bd51ac7, but I have to test it a bit more before it's ready.

…interface (#2555)  # Summary Adding an `RNGH <-> RNSVG` interface requires usage of `RenderableView.hitTest` to work. ([link](software-mansion/react-native-gesture-handler#3242)) Currently, `RenderableView.hitTest` is `package-private`, meaning it cannot be accessed by other packages. This change does not change any functionality of the library, it only exposes existing functions to other libraries. I only made public those `hitTest` implementation which are strictly necessary for this interface, this is why multiple, if not most `hitTest` implementations remain `package-private` despite the changes made in the PR. ## Test Plan - open the example app, see how the app builds successfully ### What's required for testing (prerequisites)? - `RNSVG`'s `paper-example` app ### What are the steps to reproduce (after prerequisites)? ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ❌ | | MacOS | ❌ | | Android | ✅ | | Web | ❌ | ## Checklist  - [X] I have tested this on a device and a simulator - [ ] I added documentation in `README.md` - [ ] ~~I updated the typed files (typescript)~~ - [ ] I added a test for the API in the `__tests__` folder

…tware-mansion/react-native-gesture-handler into @latekvo/add-svg-integration

android/svg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt

android/nosvg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt

# Summary This PR reverts #2555, as `RenderableView.hitTest()` can be replaced by `SvgView.reactTagForTouch()`, which is already `public`. This PR also changes the `package-private` `getSvgView()` method of `VirtualView` to `public`. This change has been made to handle hit detection of transformed `VirtualView`s, as `RenderableView`'s `hitTest()` doesn't take transformations into account, while `SvgView`'s `reactTagForTouch()` does. Making `getSvgView()` public is necessary for integrating RNSVG support into RNGH. More details [here](software-mansion/react-native-gesture-handler#3242). ## Test Plan Run the example from the RNGH - RNSVG [integration PR](software-mansion/react-native-gesture-handler#3242). ## Compatibility | OS | Implemented | | ------- | :---------: | | Android | ✅ |

…tware-mansion/react-native-gesture-handler into @latekvo/add-svg-integration

m-bert · 2025-02-25T11:18:52Z

android/build.gradle

+            "[react-native-gesture-handler] Unable to resolve react-native location in " +
+                    "node_modules. You should add project extension property (in app/build.gradle) " +
+                    "`REACT_NATIVE_NODE_MODULES_DIR` with path to react-native."


Is this done by a formatter?

Yes, the formatter.
I debated myself about removing these changes, but figured there's no benefit for deferring them, or opening a separate PR for them.

m-bert · 2025-02-25T11:20:35Z

android/build.gradle

+    return (Integer.parseInt(major) == 15 && Integer.parseInt(minor) == 11 && Integer.parseInt(patch) >= 2) ||
+            (Integer.parseInt(major) == 15 && Integer.parseInt(minor) > 11) ||
+            Integer.parseInt(major) > 15


Comment above states that it is available from 15.11.0, but here we check for 15.11.2

Fixed the comment in 98731e5. The correct version is 15.11.2 (source).

m-bert · 2025-02-25T12:38:50Z

android/build.gradle

+            exclude group: 'com.facebook.fbjni'
+            // resolves "Duplicate class com.facebook.jni.CppException"


If this is also done by formatter, could you please move this comment line above?

Also, what formatter do you use? I do not recall that our formatting script changes gradle files.

You're right that :spotlessApply has no effect on gradle files. I ran the built-in android studio Groovy formatter, to format the version-checking part of shouldUseCommonInterfaceFromRNSVG.

moved comment in 423ac1c

## Description #3242 introduced new `SVG` interface for better hit tests. Added files were not specified in `package.json` which resulted in builds failing. ## Test plan Checked that newly created app build when _**Gesture Handler**_ is added.

latekvo added 2 commits November 27, 2024 15:33

add initial svg integration code

f79a1fd

fix unnecessary path inclusion in build.gradle

1dc6bd6

latekvo changed the title ~~Integrate with react-native-svg for improved hit detection of svg elements~~ Add interaction with react-native-svg to improve hit-boxes of svg elements Nov 27, 2024

latekvo added 2 commits November 27, 2024 15:57

add optional java import declaration

c30f238

Merge branch 'main' into @latekvo/add-svg-integration

446ccb7

latekvo changed the title ~~Add interaction with react-native-svg to improve hit-boxes of svg elements~~ Add react-native-svg interface Nov 27, 2024

latekvo added 3 commits November 28, 2024 11:23

add helper functions to the integration interface

b09b0bc

fix typing & lint on hit testing interface

9ab3857

complete hitTest implementation, use hit tester impl. in gesture hand…

093f718

…ler bounds checker

latekvo mentioned this pull request Nov 28, 2024

feat: make RenderableView.hitTest public to create a cross-library interface software-mansion/react-native-svg#2555

Merged

4 tasks

add svg example, remove unnecessary import

bd51ac7

latekvo added 4 commits November 29, 2024 12:27

fix build when svg is not available

282cd4c

adjust example to highlight ios issues

4bf1b70

update svg to version supporting cross-library interaction

d22413d

add more tests to the example app

013c7a3

latekvo changed the base branch from main to next December 5, 2024 15:17

add expected behaviour output to the example app

6bc9147

latekvo changed the base branch from next to main December 18, 2024 14:31

latekvo added 4 commits December 18, 2024 15:32

Merge branch 'main' into @latekvo/add-svg-integration

782a433

fix coordinate systems when using viewBox

5b9a918

Merge branch '@latekvo/add-svg-integration' of https://github.com/sof…

237ae24

…tware-mansion/react-native-gesture-handler into @latekvo/add-svg-integration

use a getter instead of directly reading svgView

5ac6665

latekvo mentioned this pull request Dec 18, 2024

feat: make svgView getter public software-mansion/react-native-svg#2583

Merged

4 tasks

latekvo added 5 commits December 19, 2024 12:19

add comment explanation

45ddb0c

add double-nested svg viewBox test case

a401536

fix comment

939ecc8

initial view-traversing bounds checker, fix SvgView bounds recognition

cf0bc83

fix tree navigation

cb07a0d

latekvo added 8 commits January 8, 2025 16:56

use range syntax for bounds check

543a8fe

simplify gradle expression

53d54a7

rename example component name

cd1fc6d

simplify no-svg implementation

a2c2ffe

simplify redundant svgView.reactTagForTouch calls

a6ba30a

add comment explaining view parameter

04f46dd

simplify redundant if statement

84f5c48

narrow down type

be08e35

jakex7 reviewed Jan 14, 2025

View reviewed changes

android/svg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt Show resolved Hide resolved

android/nosvg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt Outdated Show resolved Hide resolved

fix nosvg function signature

29e8492

m-bert approved these changes Jan 14, 2025

View reviewed changes

latekvo added 8 commits January 29, 2025 11:54

Merge branch 'main' into @latekvo/add-svg-integration

cfc019a

update yarn.lock

b0c64a3

bump svg to compatible version

f826f83

fix version requirement in build.gradle

20d4081

Merge branch 'main' into @latekvo/add-svg-integration

0efb50f

fix out of bounds issue

d411487

Merge branch '@latekvo/add-svg-integration' of https://github.com/sof…

432956c

…tware-mansion/react-native-gesture-handler into @latekvo/add-svg-integration

(amend) fix version checks

70bf93a

m-bert requested changes Feb 25, 2025

View reviewed changes

fix comment

98731e5

m-bert reviewed Feb 25, 2025

View reviewed changes

latekvo added 2 commits February 25, 2025 13:45

move formatted comment

423ac1c

run formatter on gradle

e589ebf

m-bert approved these changes Feb 25, 2025

View reviewed changes

latekvo merged commit 5b29e9d into main Feb 25, 2025
5 checks passed

latekvo deleted the @latekvo/add-svg-integration branch February 25, 2025 16:23

m-bert mentioned this pull request Mar 28, 2025

[Android] Add missing SVG files #3465

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add `react-native-svg` interface #3242

Add `react-native-svg` interface #3242

Uh oh!

latekvo commented Nov 27, 2024 •

edited

Loading

Uh oh!

latekvo commented Nov 28, 2024

Uh oh!

Uh oh!

Uh oh!

m-bert Feb 25, 2025

Uh oh!

latekvo Feb 25, 2025 •

edited

Loading

Uh oh!

m-bert Feb 25, 2025

Uh oh!

latekvo Feb 25, 2025 •

edited

Loading

Uh oh!

m-bert Feb 25, 2025

Uh oh!

latekvo Feb 25, 2025 •

edited

Loading

Uh oh!

latekvo Feb 25, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		exclude group: 'com.facebook.fbjni'
		// resolves "Duplicate class com.facebook.jni.CppException"

Uh oh!

Add react-native-svg interface #3242

Add react-native-svg interface #3242

Uh oh!

Conversation

latekvo commented Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test plan

Uh oh!

latekvo commented Nov 28, 2024

Uh oh!

Uh oh!

Uh oh!

m-bert Feb 25, 2025

Choose a reason for hiding this comment

Uh oh!

latekvo Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

m-bert Feb 25, 2025

Choose a reason for hiding this comment

Uh oh!

latekvo Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

m-bert Feb 25, 2025

Choose a reason for hiding this comment

Uh oh!

latekvo Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

latekvo Feb 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Add `react-native-svg` interface #3242

Add `react-native-svg` interface #3242

latekvo commented Nov 27, 2024 •

edited

Loading

latekvo Feb 25, 2025 •

edited

Loading

latekvo Feb 25, 2025 •

edited

Loading

latekvo Feb 25, 2025 •

edited

Loading